{% block sw_seo_url_template_card %}
<mt-card
    class="sw-seo-url-template-card"
    position-identifier="sw-seo-url-template-card"
    :title="$tc('sw-seo-url-template-card.general.titleCard')"
    :is-loading="isLoading"
>
    <template #toolbar>
        <sw-sales-channel-switch
            :label="$tc('sw-seo-url-template-card.general.labelSalesChannelSelect')"
            @change-sales-channel-id="onSalesChannelChanged"
        />
    </template>

    {% block sw_seo_url_template_card_info_box %}
    <mt-banner
        :title="$tc('sw-seo-url-template-card.general.headlineInfoMessageBoxEmptyProperties')"
    >
        <span>{{ $tc('sw-seo-url-template-card.general.textInfoMessageBoxEmptyProperties') }}</span>
    </mt-banner>
    {% endblock %}

    {% block sw_seo_url_template_card_entries %}
    <template v-if="!isLoading && !salesChannelIsHeadless">
        <div
            v-for="(seoUrlTemplate, index) in getTemplatesForSalesChannel(salesChannelId)"
            :key="index"
            class="sw-seo-url-template-card__seo-url"
        >
            <sw-container
                columns="3fr 1fr"
                gap="5px"
            >
                {% block sw_seo_url_template_card_entries_input_wrapper %}
                <sw-inherit-wrapper
                    v-model:value="seoUrlTemplate.template"
                    :has-parent="seoUrlTemplate.salesChannelId !== null"
                    :inherited-value="getPlaceholder(seoUrlTemplate)"
                    @update:value="onInput(seoUrlTemplate)"
                >

                    <template #content="props">
                        {% block sw_seo_url_template_card_entries_input %}

                        <mt-text-field
                            :is-inheritance-field="props.isInheritField"
                            :is-inherited="props.isInherited"
                            :model-value="props.currentValue"
                            :disabled="props.isInherited"
                            :error="seoUrlTemplatesTemplateError[index]"
                            :name="`sw-field--seo-url-template-${seoUrlTemplate.entity}`"
                            :label="getLabel(seoUrlTemplate)"
                            :placeholder="getPlaceholder(seoUrlTemplate)"
                            @update:model-value="props.updateCurrentValue"
                            @inheritance-restore="props.restoreInheritance"
                            @inheritance-remove="props.removeInheritance"
                        >

                            <template #suffix>
                                {% block sw_seo_url_template_card_entries_input_suffix %}
                                <sw-loader
                                    v-if="previewLoadingStates[seoUrlTemplate.id]"
                                    size="16px"
                                />
                                <mt-icon
                                    v-else-if="errorMessages[seoUrlTemplate.id]"
                                    v-tooltip="$tc('sw-seo-url-template-card.general.tooltipInvalidTemplate')"
                                    name="regular-times"
                                />
                                <mt-icon
                                    v-else-if="noEntityError.includes(seoUrlTemplate.id)"
                                    v-tooltip="$tc('sw-seo-url-template-card.general.textUrlNoEntitiesForPreview', {
                                        entity: $tc(`global.entities.${seoUrlTemplate.entityName}`, 0)
                                    }, 0)"
                                    name="regular-exclamation-triangle"
                                />
                                <mt-icon
                                    v-else-if="!props.currentValue"
                                    v-tooltip="$tc('sw-seo-url-template-card.general.textUrlPreviewEmptyTemplate', {
                                        entity: $tc(`global.entities.${seoUrlTemplate.entityName}`, 0)
                                    }, 1)"
                                    name="regular-exclamation-triangle"
                                />
                                <mt-icon
                                    v-else
                                    v-tooltip="$tc('sw-seo-url-template-card.general.tooltipValidTemplate')"
                                    name="regular-checkmark"
                                />
                                {% endblock %}
                            </template>

                        </mt-text-field>
                        {% endblock %}
                    </template>
                </sw-inherit-wrapper>
                {% endblock %}
                {% block sw_seo_url_template_card_entries_variables %}
                <sw-single-select
                    v-if="getVariableOptions(seoUrlTemplate.id) && !noEntityError.includes(seoUrlTemplate.id)"
                    :value="selectedProperty"
                    value-property="name"
                    label-property="name"
                    show-clearable-button
                    :options="getVariableOptions(seoUrlTemplate.id)"
                    :placeholder="$tc('sw-seo-url-template-card.general.placeholderSelectVariables')"
                    :label="$tc('sw-seo-url-template-card.general.labelPossibleValues')"
                    @update:value="(propertyName) => onSelectInput(propertyName, seoUrlTemplate)"
                />
                {% endblock %}
            </sw-container>
            {% block sw_seo_url_template_card_entries_preview %}
            <div
                v-if="seoUrlTemplate.template"
                class="sw-seo-url-template-card__preview"
            >
                {% block sw_seo_url_template_card_entries_preview_label %}
                <span class="sw-seo-url-template-card__preview-label">
                    {{ $tc('sw-seo-url-template-card.general.preview') }}
                </span>
                {% endblock %}
                {% block sw_seo_url_template_card_entries_preview_item %}
                <div class="sw-seo-url-template-card__preview-item">
                    <span v-if="previews[seoUrlTemplate.id] && previews[seoUrlTemplate.id].length > 0">
                        {{ previews[seoUrlTemplate.id][0].seoPathInfo }}
                    </span>
                    <span v-else>
                        {{ $tc('sw-seo-url-template-card.general.textUrlPreviewNotPossible') }}
                    </span>
                    <span v-if="noEntityError.includes(seoUrlTemplate.id)">
                        {{ $tc('sw-seo-url-template-card.general.textUrlNoEntitiesForPreview', { entity: $tc(`global.entities.${seoUrlTemplate.entityName}`, 0) }, 0) }}
                    </span>
                </div>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
    </template>
    <div v-if="salesChannelIsHeadless && !isLoading">
        {{ $tc('sw-seo-url.textSeoUrlsDisallowedForHeadless') }}
    </div>
    {% endblock %}
</mt-card>
{% endblock %}
